// Name:            Grid
//
// Description:     Mobile first 12 列网格系统，基于浮动布局；相对定位实现 push / pull
//
//                  Breakpoint:
//                    sm: <= 640px
//                    md: 641px <= 1024px
//                    lg: >1024px
//
// Component:       `.am-g`
//
// Sub-objects:     `.am-u-{point}-{n}`
//
// =============================================================================

/* ==========================================================================
   Component: Grid
 ============================================================================ */

// Mixins
// =============================================================================
.reset-order(@point) {
    .@{ns}u-@{point}-reset-order {
        margin-left: 0;
        margin-right: 0;
        left: auto;
        right: auto;
        float: left;
    }
}

.col-basic() {
    [class*="@{ns}u-"] {
        width: 100%;
        padding-left: @grid-gutter;
        padding-right: @grid-gutter;
        float: left;
        position: relative;
        // Float the last col to right
        &+&:last-child {
            float: right;
        }
        // Not float the last col
        &+&.@{ns}u-end {
            float: left;
        }
        @media @medium-up {
            & {
                padding-left: @grid-gutter-md;
                padding-right: @grid-gutter-md;
            }
        }
    }
    // [class*="@{ns}u-pull-"],
    // [class*="@{ns}u-push-"] {
    //  position: relative;
    // }
    [class*="@{ns}u-pull-"] {
        left: auto;
    }
    [class*="@{ns}u-push-"] {
        right: auto;
    }
}

.col-misc(@point) {
    [class*="@{ns}u-"] {
        // 居中的网格
        &.@{ns}u-@{point}-centered {
            margin-left: auto;
            margin-right: auto;
            float: none;
            &:last-child {
                float: none;
            }
        }
        &.@{ns}u-@{point}-uncentered {
            margin-left: 0;
            margin-right: 0;
            float: left;
            &:last-child {
                float: left;
            }
        }
    }
}

// calc grid: width, push, pull, offset
.calc-grid-col (@point: sm, @type, @n: @grid-columns, @i: 1) when (@type =width) and (@i =< @n) {
    .@{ns}u-@{point}-@{i} {
        width: (@i * 100% / @n);
    }
}

.calc-grid-col (@point: sm, @type, @n: @grid-columns, @i: 1) when (@type =push) and (@i =1) {
    .@{ns}u-@{point}-push-0 {
        left: 0;
    }
}

.calc-grid-col (@point: sm, @type, @n: @grid-columns, @i: 1) when (@type =push) and (@i < @n) {
    .@{ns}u-@{point}-push-@{i} {
        left: @i * (100% / @n);
    }
}

.calc-grid-col (@point: sm, @type, @n: @grid-columns, @i: 1) when (@type =pull) and (@i =1) {
    .@{ns}u-@{point}-pull-0 {
        right: 0;
    }
}

.calc-grid-col (@point: sm, @type, @n: @grid-columns, @i: 1) when (@type =pull) and (@i < @n) {
    .@{ns}u-@{point}-pull-@{i} {
        right: @i * (100% / @n);
    }
}

.calc-grid-col (@point: sm, @type, @n: @grid-columns, @i: 1) when (@type =offset) and (@i =1) {
    .@{ns}u-@{point}-offset-0 {
        margin-left: 0;
    }
}

.calc-grid-col (@point: sm, @type, @n: @grid-columns, @i: 1) when (@type =offset) and (@i < @n) {
    .@{ns}u-@{point}-offset-@{i} {
        margin-left: @i * (100% / @grid-columns);
    }
}

.loop-cols (@point: sm, @type, @n: @grid-columns, @i: 1) when (@i =< @n) {
    .calc-grid-col(@point, @type, @n, @i);
    .loop-cols(@point, @type, @grid-columns, (@i + 1));
}

.make-cols(@point) {
    .loop-cols(@point, width);
    .loop-cols(@point, pull);
    .loop-cols(@point, push);
    .loop-cols(@point, offset);
    .reset-order(@point);
    .col-misc(@point);
}

// Container
.@{ns}container {
    .grid-container();
    >.@{ns}g {
        width: auto;
        margin-left: -@grid-gutter;
        margin-right: -@grid-gutter;
        @media @medium-up {
            margin-left: -@grid-gutter-md;
            margin-right: -@grid-gutter-md;
        }
    }
}

.@{ns}g {
    margin: 0 auto;
    width: 100%;
    .clearfix();
    // Nested grid
    & & {
        margin-left: -@grid-gutter;
        margin-right: -@grid-gutter;
        width: auto;
        &.@{ns}g-collapse {
            margin-left: 0;
            margin-right: 0;
            width: auto;
        }
        // Increasing gutter for medium and large screen
        @media @medium-up {
            margin-left: -@grid-gutter-md;
            margin-right: -@grid-gutter-md;
        }
    }
    &.@{ns}g-collapse & {
        margin-left: 0;
        margin-right: 0;
    }
}

// no padding
.@{ns}g-collapse {
    [class*="@{ns}u-"] {
        padding-left: 0;
        padding-right: 0;
    }
}

// Fixed width row
.@{ns}g-fixed {
    max-width: @grid-max-width;
}

.col-basic();
@media @screen {
    .make-cols(sm);
}

@media @medium-up {
    .make-cols(md);
}

@media @large-up {
    .make-cols(lg);
}

// Hooks
// =============================================================================
// Core grid, No hooks
